<template>
  <v-page
    header-background="#ffffff"
    background="#f5f6fa"
    padding-top="24rpx"
    :loading="loading"
  >
    <template #header>
      <v-navbar title="选择问题商品" />
    </template>
    <template #default>
      <template v-if="order">
        <template
          v-for="(item, index) in productList"
          :key="index"
        >
          <complaint-order-item
            v-if="item?.order_detail"
            :order="order"
            :aftersales="getAftersales(item)"
            :product="item.order_detail"
            :active="product?.id === item.order_detail.id"
            :info="getInfo(item)"
            @click="selectProduct(item)"
          />
        </template>
      </template>
    </template>
    <template #footer>
      <view class="submit-button-container">
        <v-button
          type="primary"
          @click="submitHandle"
        >
          确认提交
        </v-button>
      </view>
    </template>
    <template #popup>
      <wd-popup
        v-model="isShowPopper"
        :close-on-click-modal="false"
        custom-style="background: transparent"
      >
        <view class="popper-container">
          <view class="popper-title">
            投诉已存在
          </view>
          <view class="popper-content">
            该商品当前已有存在一个投诉，请耐心等待处理，可查看最新进度或补充凭证
          </view>
          <view class="popper-button-list">
            <v-button
              type="plain"
              :custom-style="{ height: '80rpx', width: '240rpx' }"
              @click="isShowPopper = false"
            >
              取消
            </v-button>
            <v-button
              type="primary"
              :custom-style="{ height: '80rpx', width: '240rpx' }"
              @click="redirectToDetails"
            >
              查看进度
            </v-button>
          </view>
        </view>
      </wd-popup>
    </template>
  </v-page>
</template>

<script setup lang="ts">
import ComplaintOrderItem from './modules/complaint-order-item.vue';

const order = ref<OrderVO>();
const complaint = ref<OrderComplaintRelOrderVO>();
const product = ref<OrderDetailVO>();
const productList = ref<OrderComplaintRelOrderVO[]>([]);
const getProductList = async () => {
  if (!order.value) return;
  const response = await $api.getOrderComplaintRelOrder({
    order_id: order.value.id
  });
  switch (response.__error) {
    case undefined:
      productList.value = response.data.list;
      break;
  }
};

const getInfo = (item: OrderComplaintRelOrderVO) => {
  if (!item.complaint_flag) return undefined;
  return '当前已有一个投诉';
};

const loading = ref(true);
onLoad(async () => {
  const pageStore = $store.page();
  const parameters = pageStore.parameters as {
    order: OrderVO;
    product: OrderDetailVO;
  };
  order.value = parameters.order;
  product.value = parameters.product;
  await getProductList();
  loading.value = false;
});

const redirectToDetails = () => {
  isShowPopper.value = false;
  uni.navigateTo({
    url: `/pages/complaint/complaint-details?id=${complaint.value?.order_complaint_id}`
  });
};

const getAftersales = (item: OrderComplaintRelOrderVO) => {
  if (!item.back_refund_view_list?.length) return undefined;
  return item.back_refund_view_list?.find(
    (item) =>
      item.basic_status === 'PROCEED_REFUND' || item.basic_status === 'SUCCESS'
  );
};

const selectProduct = (item: OrderComplaintRelOrderVO) => {
  complaint.value = item;
  product.value = item.order_detail;
};

const isShowPopper = ref(false);

const submitHandle = () => {
  if (complaint.value && getInfo(complaint.value)) {
    isShowPopper.value = true;
    return;
  }
  if (!product.value) {
    uni.showToast({ title: '请选择问题商品', icon: 'none' });
    return;
  }
  uni.$emit('complaint-product-select', product.value);
  uni.navigateBack();
};
</script>

<style lang="scss" scoped>
.header-info {
  line-height: 84rpx;
  text-align: center;
}
.complaint-block {
  margin: 0 24rpx 20rpx;
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 24rpx;
  display: flex;
  align-items: center;
}

.submit-button-container {
  margin: 0 24rpx 24rpx;
  padding: 10rpx 0;
}

.popper-container {
  width: 560rpx;
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 40rpx 24rpx;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 50rpx;
  .popper-title {
    line-height: 60rpx;
    font-size: 32rpx;
    font-weight: bold;
    text-align: center;
  }
  .popper-content {
    font-size: 28rpx;
    color: #999999;
    text-align: center;
  }
  .popper-button-list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24rpx;
  }
}
</style>
